<script lang="ts" setup>
import{ getUserInfo } from '@/services/user'
import { useUserStore } from '@/stores'
import type { UserInfo } from '@/types/user'
import { showConfirmDialog } from 'vant'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const user = ref<UserInfo>()
onMounted(async () => {
    const res = await getUserInfo()
    user.value = res.data
    // console.log(res.data)
})

//初始化快捷工具
const tools = [
    { label: '我的问诊', path: '/user/consult' },
    { label: '我的处方', path: '/' },
    { label: '家庭档案', path: '/user/patient' },
    { label: '地址管理', path: '/user/address' },
    { label: '我的评价', path: '/' },
    { label: '官方客服', path: '/' },
    { label: '设置', path: '/' },
]
//退出
const store = useUserStore()
const router = useRouter()
const onLogout = async () => {
    await showConfirmDialog({
        title: '温馨提示',
        message: '是否确认退出？'
    })
    //点击的确认
    store.delUser()
    router.push('/login')
}
</script>
<template>
    <div class="user-page">
        <!-- 头部 -->
        <div class="user-page-head">
            <div class="top">
                <!-- round设置图片变圆，
                 fit设置图片填充模式 -->
                <van-image
                  round
                  fit="cover"
                  :src="user?.avatar"
                >
                </van-image>
                <div class="name">
                    <p>{{user?.account}}</p>
                    <p><van-icon name="edit"></van-icon></p>
                  </div>
            </div>
            <!-- van-row 和 van-col 是 Vant 组件库中的 栅格布局组件，用于实现灵活的网格布局系统（类似 Bootstrap 的栅格系统
             van-row：定义一行（横向布局容器），用于包裹一组 van-col
             van-col：定义列（单元格），通过设置 span 属性控制列宽比例，实现分栏布局 -->
            <van-row>
                <van-col span="6">
                    <p>{{ user?.collectionNumber }}</p>
                    <p>收藏</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user?.likeNumber }}</p>
                    <p>关注</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user?.score }}</p>
                    <p>积分</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user?.couponNumber }}</p>
                    <p>优惠券</p>
                </van-col>
            </van-row>
        </div>
        <!-- 订单 -->
        <div class="user-page-order">
            <div class="head">
                <h3>药品订单</h3>
                <router-link to="/order">全部订单<van-icon name="arrow"></van-icon></router-link>
            </div>
            <van-row>
                <van-col span="6">
                    <!-- 如果前面的表达式user?.orderInfo.paidNumber为false就展示后面的空字符串''  -->
                    <van-badge :content="user?.orderInfo.paidNumber || ''"><cp-icon name="user-paid"></cp-icon></van-badge>
                    <p>待付款</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user?.orderInfo.receivedNumber || ''"><cp-icon name="user-shipped"></cp-icon></van-badge>
                    <p>待发货</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user?.orderInfo.shippedNumber || ''"><cp-icon name="user-received"></cp-icon></van-badge>
                    <p>待收货</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user?.orderInfo.finishedNumber || ''"><cp-icon name="user-finished"></cp-icon></van-badge>
                    <p>已完成</p>
                </van-col>
            </van-row>
        </div>
        <!-- 快捷工具 -->
        <div class="user-page-group">
            <h3>快捷工具</h3>
            <van-cell 
            v-for="(item, index) in tools" 
            :key="item.label"
            :title="item.label" 
            :to="item.path" 
            is-link 
            :border="false">
                <template #icon><cp-icon :name="`user-tool-0${index + 1}`"></cp-icon></template>
            </van-cell>
        </div>
        <!-- 退出登录 -->
         <a href="javascript:;" class="logout" @click="onLogout">退出登录</a>
    </div>
</template>

<style lang="scss" scoped>
.user-page {
    background-color: var(--cp-bg);
    /* 确保元素的最小高度为视口高度的 50%，适合需要根据屏幕尺寸调整布局 */
    min-height: calc(100vh - 50px);
    padding: 0 15px 65px;
    //头部
    &-head {
        height: 200px;
        /* 创建从上到下的半透明渐变背景 */
        background: linear-gradient(180deg, rgba(44, 181, 165, 0.46), rgba(44, 181, 165, 0));
        margin: 0 -15px;
        padding: 0 15px;
        .top {
            display: flex;
            padding-top: 50px;
            /* 交叉轴居中对齐 */
            align-items: center;
            .van-image {
                width: 70px;
                height: 70px;
            }
            .name {
                padding-left: 10px;
                p {
                    &:first-child {
                        font-size: 18px;
                        font-weight: 500;
                    }
                    &:last-child {
                        margin-top: 10px;
                        color: var(--cp-primary);
                        font-size: 16px;
                    }
                }
            }
        }
        .van-row {
            margin: 0 -15px;
            padding-top: 15px;
            p {
                text-align: center;
                &:first-child {
                    font-size: 18px;
                    font-weight: 500;
                }
                &:last-child {
                    color: var(--cp-dark);
                    font-size: 12px;
                    padding-top: 4px;
                }
            }
        }
    }
    //订单
    &-order {
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        .head {
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            padding: 0 15px;
            a {
                color: var(--cp-tip);
            }
        }
        .van-col {
            text-align: center;
            .cp-icon {
                font-size: 28px;
            }
            p {
                font-size: 12px;
                padding-top: 4px;
            }
        }
    }
    //分组
    &-group {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        h3 {
            padding-left: 16px;
            line-height: 44px;
        }
        .van-cell {
            align-items: center;
        }
        .cp-icon {
            font-size: 17px;
            margin-right: 10px;
        }
    }
    .logout {
        display: block;
        margin: 20px auto;
        width: 100px;
        text-align: center;
        color: var(--cp-price);
    }
}
</style>